<template>
  <div class="wrap">
    <div class="wrap-l">
      <div class="cell-l">
        <div class="title-l">
          <span class="t-l">
            <img src="../assets/images/info.png" />
            <span>个人信息</span>
          </span>
          <img src="../assets/images/down-fff.png" />
        </div>
        <div>
          <span class="info-l">姓名：</span>
          <span>{{name}}</span>
        </div>
        <div>
          <span class="info-l">求职意向：</span>
          <span>{{focus}}</span>
        </div>
        <div>
          <span class="info-l">性别：</span>
          <span>{{sex}}</span>
        </div>
        <div>
          <span class="info-l">年龄：</span>
          <span>{{age}}</span>
        </div>
        <div>
          <span class="info-l">现居住地：</span>
          <span>{{address}}</span>
        </div>
        <div>
          <span class="info-l">电话：</span>
          <span>{{tel}}</span>
        </div>
        <div>
          <span class="info-l">邮箱：</span>
          <span>{{email}}</span>
        </div>
      </div>
      <div class="cell-l">
        <div class="title-l">
          <span class="t-l">
            <img src="../assets/images/flag.png" />
            <span>求职意向</span>
          </span>
          <img src="../assets/images/down-fff.png" />
        </div>
        <div>
          <span class="info-l">到岗时间：</span>
          <span>{{arrival}}</span>
        </div>
        <div>
          <span class="info-l">目标地点：</span>
          <span>{{area}}</span>
        </div>
        <div>
          <span class="info-l">期望月薪：</span>
          <span>{{wages}}</span>
        </div>
        <div>
          <span class="info-l">目标职位：</span>
          <span>{{focus}}</span>
        </div>
      </div>
    </div>
    <div class="wrap-r">
      <div class="cell-r">
        <div class="title-r">
          <span class="r-l">
            <img src="../assets/images/lately.png" />
            <span>最近工作</span>
          </span>
          <img src="../assets/images/down-p.png" />
        </div>
        <div>
          <span>公司：</span>
          <span>{{company}}</span>
        </div>
        <div>
          <span>行业：</span>
          <span>{{industry}}</span>
        </div>
        <div>
          <span>时间起止：</span>
          <span>{{SASTime}}</span>
        </div>
      </div>
      <div class="cell-r">
        <div class="title-r">
          <span class="r-l">
            <img src="../assets/images/education.png" />
            <span>最高学历</span>
          </span>
          <img src="../assets/images/down-p.png" />
        </div>
        <div>
          <span>学校：</span>
          <span>{{school}}</span>
        </div>
        <div>
          <span>学历：</span>
          <span>{{education}}</span>
        </div>
        <div>
          <span>专业：</span>
          <span>{{major}}</span>
        </div>
      </div>
      <div class="cell-r">
        <div class="title-r">
          <span class="r-l">
            <img src="../assets/images/experience.png" />
            <span>工作经验</span>
          </span>
          <img src="../assets/images/down-p.png" />
        </div>
        <div>
          <span>{{function1}}</span>
          <span>{{duration1}}</span>
        </div>
        <div>
          <span>{{function2}}</span>
          <span>{{duration2}}</span>
        </div>
        <div>
          <span>{{function3}}</span>
          <span>{{duration3}}</span>
        </div>
      </div>
      <div class="cell-r">
        <div class="title-r">
          <span class="r-l">
            <img src="../assets/images/certificate.png" />
            <span>作品证书技能</span>
          </span>
          <img src="../assets/images/down-p.png" />
        </div>
        <div>
          <span>1.</span>
          <span>{{skill}}</span>
        </div>
        <div>
          <span>2.</span>
          <span></span>
        </div>
        <div>
          <span>3.</span>
          <span></span>
        </div>
      </div>
    </div>
    <!-- <div class="basic-info-item">
                            <div class="basic-info-title">基本信息</div>
                            <div class="basic-info-content">
                                <div><img src="../assets/images/user.png"></div>
                                <div class="basic-info-content-r">
                                    <span class="info-name">樊荣昌</span>
                                    <span>广州-南沙区</span>
                                    <span>男|30岁</span>
                                    <span>电话：13318786789</span>
                                    <span>状态：在职</span>
                                </div>
                            </div>
                        </div>
                        <div class="basic-info-item">
                            <div class="basic-info-title">求职意向</div>
                            <div class="job-intention-content"><span>期望工作:web前端开发</span>
                                <span>工作地点：广州-南沙区</span>
                                <span>期望薪资：5000元</span></div>
                        </div>
                        <div class="basic-info-item">
                            <div class="basic-info-title">技能爱好</div>
                            <div class="hobby">
                                王者荣耀，神武
                            </div>
                        </div>
                        <div class="basic-info-item">
                            <div class="basic-info-title">工作经验</div>
                            <div>
                                <div class="work-experience-content work-experience"><span class="job-title">web前端开发|1年</span>
                                    <span>广州内牛科技有限公司|2018年</span>
                                    <span>个人原因</span>
                                </div>
                                <div class="work-experience-content work-experience"><span class="job-title">JAVA开发|1年</span>
                                    <span>广州大牛科技有限公司|2018年</span>
                                    <span>他人原因</span>
                                </div>
                            </div>
                        </div>
                        <div class="basic-info-item">
                            <div class="basic-info-title">教育经历</div>
                            <div>
                                <div class="work-experience-content work-experience"><span>计算机科学|高中</span>
                                    <span>南沙中学</span>
                                    <span>2012</span>
                                </div>
                                <div class="work-experience-content work-experience"><span>应用科学|初中</span>
                                    <span>南沙中学</span>
                                    <span>2009</span>
                                </div>
                            </div>
    </div>-->
  </div>
</template>
<script>
import API from "../api/api.js";
import store from "../vuex/store.js";
export default {
  data() {
    return {
      name: null,
      sex: null,
      age: null,
      address: null,
      tel: null,
      email: null,
      focus: null,
      arrival: null,
      area: null,
      wages: null,
      company: null,
      industry: null,
      SASTime: null,
      leaving: null,
      jobContent: null,
      school: null,
      education: null,
      major: null,
      function1: null,
      duration1: null,
      function2: null,
      duration2: null,
      function3: null,
      duration3: null,
      skill: null
    };
  },
  components: {},
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      if (
        !this.$store.state.id ||
        !this.$store.state.user ||
        !this.$store.state.token
      ) {
        this.$router.push({ name: "login" });
        return;
      }
      API.personal_token(this.$store.state.id, this.$store.state.token).then(
        res => {
          if (res.data.code == 1) {
            this.$message({
              message: res.data.msg,
              type: "success"
            });
          }
          if (res.data.code == 0) {
            this.$message(res.data.msg);
            this.$store.commit("_removeItem");
            this.$router.push({ name: "login" });
            return;
          }
        }
      );
      API.get_user_info(this.$store.state.id).then(res => {
        if (res.data.code == 0) {
          this.$message(res.data.msg);
          this.$router.push({ name: "resumeFilling" });
          return;
        }
        if (res.data.code == 1) {
          this.name = res.data.res.name;
          this.sex = res.data.res.sex;
          this.age = res.data.res.age;
          this.address = res.data.res.address;
          this.tel = res.data.res.tel;
          this.email = res.data.res.email;
          this.focus = res.data.res.focus;
          this.arrival = res.data.res.arrival;
          this.area = res.data.res.area;
          this.wages = res.data.res.wages;
          this.company = res.data.res.company;
          this.industry = res.data.res.industry;
          this.SASTime = res.data.res.SASTime;
          this.leaving = res.data.res.leaving;
          this.jobContent = res.data.res.jobContent;
          this.school = res.data.res.school;
          this.education = res.data.res.education;
          this.major = res.data.res.major;
          this.function1 = res.data.res.function1;
          this.duration1 = res.data.res.duration1;
          this.function2 = res.data.res.function2;
          this.duration2 = res.data.res.duration2;
          this.function3 = res.data.res.function3;
          this.duration3 = res.data.res.duration3;
          this.skill = res.data.res.skill;
        }
        //    if(!res.data.name){
        //        this.$router.push({
        //            name:'resumeFilling'
        //        })
        //    }
      });
      // if (!this.userInfo) {
      //     this.$router.push({
      //         path: 'login'
      //     })
      // }
    }
  }
};
</script>

<style scoped>
.wrap {
  width: 100%;
  padding: 0.1rem 20%;
  background: #efefef;
  display: flex;
}
.wrap-l {
  padding: 2rem;
  background: #ab47bc;
}
.cell-l {
  margin-top: 2rem;
}
.cell-l div {
  padding: 0.2rem 0;
}
.title-l {
  margin-bottom: 0.6rem;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid #fff;
}
.title-l img {
  width: 1.2rem;
  height: 1.2rem;
}
.t-l {
  display: flex;
  align-items: center;
}

.wrap-r {
  padding: 1.2rem 2rem;
  background: #e1bee7;
}
.cell-r {
  margin-bottom: 1rem;
}
.title-r {
  margin-bottom: 0.2rem;
  color: #800080;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid #800080;
}
.cell-l div {
  padding: 0.1rem 0;
}
.title-r img {
  width: 1rem;
  height: 1rem;
}
/* .basic-info-item {
                        background: #ffffff;
                        margin-bottom: 0.2rem;
                    }
                    .basic-info-title {
                        padding: 0.2rem 0.3rem;
                        color: #303030;
                        font-size: 0.36rem;
                        border-bottom: 0.02rem solid #EBEBEB;
                    }
                    .basic-info-content {
                        display: flex;
                        justify-content: flex-start;
                    }
                    .basic-info-content div {
                        padding: 0.3rem;
                    }
                    .basic-info-content img {
                        width: 1.8rem;
                        height: 1.8rem;
                        border-radius: 50%
                    }
                    .basic-info-content-r,
                    .job-intention-content,
                    .work-experience-content {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                    }
                    .basic-info-content-r span,
                    .work-experience-content span {
                        color: #787878;
                        font-size: 0.26rem;
                        padding: 0.06rem 0;
                    }
                    .basic-info-content-r .info-name,
                    .work-experience-content .job-title {
                        color: #3A3A3A;
                        font-size: 0.36rem;
                    }
                    .job-intention-content span,
                    .hobby {
                        font-size: 0.33rem;
                        padding: 0.1rem 0.8rem;
                    }
                    .work-experience {
                        padding: 0 0.8rem;
                    } */
</style>
